.container {
  position: relative;
  flex: 1 1 auto;
  z-index: 100;
  max-width: 52rem;
}

.container .input {
  border-radius: 32px;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  transition: 0.2s ease background-color, 0.2s ease color,
    0.2s ease border-color;
}

.container .input:focus {
  background-color: var(--color-background);
  border-color: var(--color-background);
  color: var(--color-text);
}

.active {
  background-color: var(--color-gray-100);
}

.spin {
  animation: spin-animation 2s infinite;
}

.suggestions {
  background-color: var(--color-background);
  overflow: auto;
  max-width: unset;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  max-height: calc(100vh - 200px);
}

@media screen and (max-width: 1023px) {
  .suggestions {
    max-height: calc(100dvh - 200px);
  }
}

.suggestions::-webkit-scrollbar {
  width: 0.5rem;
}

.suggestions::-webkit-scrollbar-track {
  background: transparent;
}

.suggestions::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 0.25rem;
}

.suggestions::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-300);
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.overlay {
  background-color: rgba(#6b7280, 0.75);
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 300ms;
  opacity: 1;
  position: fixed;
  animation: animatedOverlay 0.2s ease;
  backdrop-filter: blur(4px);
}

@keyframes animatedOverlay {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}
